<template>
  <div v-loading="loading">
    <el-header style="display: flex; align-items: center; justify-content: flex-start; padding-left: 5px; margin-top:0px; margin-bottom:5px">
      <i class="el-icon-location-information" style="font-size:20px; margin-right:5px">
        当前位置：首页
      </i>
    </el-header>
    <div class="button-container">
      <div class="button-wrapper" v-for="(button, index) in buttons" :key="index">
        <el-button 
          type="primary"
          size="large"
          class="circle"
          @click="navigateTo(button.path)"
        >
          <i :class="button.icon"></i>
        </el-button>
        <div class="button-text">{{ button.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      buttons: [
        { icon: "el-icon-s-platform", text: "用户与权限管理", path: "/user" },
        { icon: "el-icon-menu", text: "操作日志管理", path: "/log" },
        { icon: "el-icon-user-solid", text: "人员信息管理", path: "/worker" },
        { icon: "el-icon-s-open", text: "工艺信息管理", path: "/craft" },
        { icon: "el-icon-s-tools", text: "设备信息管理", path: "/equipment" },
        { icon: "el-icon-s-goods", text: "工装信息管理", path: "/instrument" },
        { icon: "el-icon-s-flag", text: "物料齐套性评估", path: "/plan" },
        { icon: "el-icon-s-help", text: "质量信息管理", path: "/quality" },
        { icon: "el-icon-question", text: "异常信息管理", path: "/exception" },
        { icon: "el-icon-s-order", text: "主计划信息", path: "/plan" },
        { icon: "el-icon-s-marketing", text: "装配进度评估", path: "/plan" },
        { icon: "el-icon-s-claim", text: "生产计划生成", path: "/plan" },
        { icon: "el-icon-s-promotion", text: "生产计划查询", path: "/searchplan" },
        { icon: "el-icon-s-management", text: "生产计划调度", path: "/generatingschedule" },
      ],
    };
  },
  mounted() {
    // 模拟延迟加载图标
    setTimeout(() => {
      this.loading = false;
    }, 500); // 2秒后隐藏加载动画
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          console.error(err);
        }
      });
    },
  },
}
</script>

<style scoped>
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
  align-items: stretch;
  gap: 50px; /* 按钮之间的间距 */
  align-content: flex-start;
  width: 100%;
}

.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; 
  flex-grow: 0; /* 不允许按钮容器增长 */
  flex-shrink: 0; /* 不允许按钮容器缩小 */
  flex-basis: calc((100% / 6) - 50px); /* 假设按钮之间的间距为20px */
  margin: 0px 0; /* 根据需要调整行间距 */
}

.el-button.circle {
  border:none;
  border-radius: 50%; /* 使按钮的边角完全圆滑 */
  padding: 0; /* 移除内边距 */
  width: 120px; /* 按钮的宽度 */
  height: 120px; /* 按钮的高度 */
  line-height: 120px; /* 行高与按钮高度一致，使图标垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.5s ease;/* 平滑过渡效果 */
  background-color: #ebf5fe;
}

.el-button.circle i {
  display:flex;
  justify-content: center;
  font-size: 45px; 
  transition: 0.5s ease;/* 图标大小 */
  color:#02478e;
}

.button-text {
  font-family: '微软雅黑', sans-serif; /* 字体设置为微软雅黑 */
  font-weight: bold; /* 字体加粗 */
  font-size: 21px;
  text-align: center;
}

.el-button.circle:hover {
  background-color: #02478e; /* 鼠标悬停时的背景颜色 */
}
.el-button.circle:hover i {
  color: white; /* 鼠标悬停时图标颜色 */
}
.el-button.circle:active {
  background-color: #004085; /* 鼠标点击时的背景颜色 */
}
</style>
